<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/11/2
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>订单详情模块</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" rel="stylesheet" />
    <style>
        #address-right {
            margin-left: 590px;
            width: 820px;
            height: 50px;
            margin-top: 10px;
            /*   margin-bottom: 10px; */
            border: 1px solid #F6F6F6;
            /* float: left; */
        }
        .goodsname{
            display:block;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .address-right-head {
            margin-left: 10px;
            height: 40px;
            width: 810px;
            /* margin-top: 10px; */
            float: left;
            text-align: center;
            /* border: 1px solid black; */
            border-collapse: collapse;
        }

        .address-right-head1 {
            border-bottom: 2px solid orange;
        }
        .address-right-head2{
            margin-left: 5px;
        }
        .address-right-head3 {
            width: 100px;
            height: 30px;
            background-color: #ef771f;
            color: white;
            float: left;
            margin-left: 5px;
            line-height: 30px;
            text-align: center;
            font-size: 16px;
        }

        .address-font {
            color: orange;
        }

        .header-bottom-search {
            padding-left: 350px;
        }

        .Myorder-detail {
            height: 600px;
            width: 850px;
            margin-left: 580px;
            /* border: 1px solid red; */
            box-sizing: border-box;
            border-collapse: collapse;
        }

        .Myorder-detail1 {
            margin-top: 30px;
            height: 100px;
            margin-left: 0;
            border: 3px solid #FF5722;
            background-color: #fffde7;
        }

        .Myorder-detail-1 {
            height: 30px;
            padding-left: 30px;
            line-height: 30px;
        }

        .Myorder-detail-a,
        .Myorder-detail-a1,
        .Myorder-detail-a3 {
            height: 40px;
            background-color: #F6F6F6;
            color: #FF5722;
            padding-left: 20px;
            font-size: 20px;
            line-height: 40px;
        }

        .Myorder-detail-a1 {
            color: black;
            text-align: center;
        }

        .Myorder-detail-a2 {
            height: 40px;
            line-height: 40px;
            padding-left: 10px;
        }

        .Myorder-detail-2 {
            margin-top: 10px;
            padding-left: 20px;
        }

        .Myorder-detail2 {
            margin-top: 10px;
            height: 160px;
            border: 3px solid #fffde7;
        }

        .Myorder-detail3 {
            margin-top: 10px;
            height: 80px;
            border: 3px solid #fffde7;
        }

        .Myorder-detail4 {
            margin-top: 10px;
            height: 160px;
            border: 3px solid #fffde7;
        }

        .Myorder-detail-a3 {
            background-color: #fffde7;
            text-align: center;
            margin-left: 0px;
            color: #FF5722;
        }

        .Myorder-detail4-1 {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        .Myorder-detail-img {
            height: 70px;
            /* display: table-cell; */
            /* text-align: center; */
            /* vertical-align: middle; */
            /* margin-left: 30px; */
        }

        .Myorder-detail5 {
            margin-top: 10px;
            height: 40px;
            background-color: #f1f1f1;
            line-height: 40px;
            text-align: right;
        }
    </style>
</head>

<body>
<!-- 订单详情页面 -->
<table id="address-right">
    <tr>
        <td>
            <div class="address-right-head">
    <tr class="address-right-head1">
        <td class="address-right-head2">
            <div class="address-right-head3">
                订单详情
            </div>
        </td>
    </tr>
    </div>
    </td>
    </tr>
</table>

<div class="layui-container Myorder-detail">
    <div class="Myorder-detail1 ">
        <div class="layui-col-md12 ">
            <div class="layui-row">
                <div class="layui-col-md10-offset2 Myorder-detail-1">
                    订单号:<a id="orderid" href="javascript:void(0)">${ordermsg.orderno}</a> &nbsp;&nbsp; 下单日期:${ordermsg.ordertime} &nbsp;&nbsp; 状态:${ordermsg.status}
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md10-offset1 Myorder-detail-2">

                    <button class="layui-btn layui-btn-radius layui-btn-warm" onclick="cancel()">取消按钮</button>
                    <button class="layui-btn layui-btn-radius" onclick="pay()">立即付款</button>
                </div>
            </div>
        </div>
    </div>
    <div class="Myorder-detail2">
        <div class="layui-col-md12">
            <div class="layui-row Myorder-detail-a">收件人信息</div>
            <div class="layui-row">
                <div class="layui-col-md3 Myorder-detail-a1">收货人:</div>
                <div class="layui-col-md9 Myorder-detail-a2">${ordermsg.accept}</div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md3 Myorder-detail-a1">地址:</div>
                <div class="layui-col-md9 Myorder-detail-a2">${ordermsg.address}</div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md3 Myorder-detail-a1">手机号码:</div>
                <div class="layui-col-md9 Myorder-detail-a2">${ordermsg.telphone}</div>
            </div>
        </div>
    </div>
    <div class="Myorder-detail3">
        <div class="layui-col-md12">
            <div class="layui-row  Myorder-detail-a">支付及配送方式</div>
            <div class="layui-row">
                <div class="layui-col-md3 Myorder-detail-a1">支付方式:</div>
                <div class="layui-col-md9 Myorder-detail-a2">${ordermsg.paytype}</div>
            </div>
        </div>
    </div>
    <div class="Myorder-detail4">
        <div class="layui-col-md12">
            <div class="layui-row  Myorder-detail-a">商品清单</div>
            <div class="layui-row Myorder-detail-a3">
                <div class="layui-col-md3">图片</div>
                <div class="layui-col-md3">商品名称</div>
                <div class="layui-col-md2">商品价格</div>
                <div class="layui-col-md2">商品数量</div>
                <div class="layui-col-md2">小计</div>
            </div>
            <C:forEach items="${orderItemList}" var="orderItem">


            <div class="layui-row Myorder-detail4-1">
                <div class="layui-col-md3">
                    <img class="Myorder-detail-img" src="${pageContext.request.contextPath}/img/${orderItem.goods.image}" />
                </div>
                <div class="layui-col-md3 "><a href="javascript:void(0)" class="goodsname">${orderItem.goods.name}</a></div>
                <div class="layui-col-md2">${orderItem.prices}</div>
                <div class="layui-col-md2">${orderItem.goodsnum}</div>
                <div class="layui-col-md2">${orderItem.totalPrice}
                </div>
            </div>
            </C:forEach>
        </div>
    </div>
    <div class="Myorder-detail5">
        <div class="layui-col-md11">
            <div class="layui-row">订单支付金额:
                ￥<span style="color: red;">${ordermsg.money}</span>
            </div>
        </div>
        <div class="layui-col-md1">
  <%--          <C:forEach items="${orderItemList}" var="orderItem">
            <input name="goodsid" value="${orderItem.goods.id}" style="display: none" >
            </C:forEach>--%>
        </div>
    </div>
</div>
</body>
<script>
/*    var arr = new Array();//定义一个数组  用于存储goodsid*/
    let flag = false;
    //删除订单
/*    $(function () {

        $("input[name='goodsid']").each(function () {
            let gid = parseInt($(this).val());
            alert(gid);
            arr.push(gid);
        });
    });*/
    function cancel() {
     /*  let gid =  $('#goodsid').val();//图书id，用于回滚库存*/
        let ono = $("#orderid").text();//用于删除订单

        $.ajax({
            url: "${pageContext.request.contextPath}/personal/delOrder",
            cache: false,
            data:{
/*              goodsid: encodeURI(JSON.stringify(arr)),*/
                orderno:ono,
            },
            dataType:"json",
            async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
            success: function(data){
                if(data.flag){
                    flag = true;
                    send();
                 /*   location.href="${pageContext.request.contextPath}/personal/index";//回到个人中心首页*/
                }
                if(!data.flag){
                    flag = false;
                    alert(data.massage);//提示报错信息
                  /*  location.href="${pageContext.request.contextPath}/jspPage/homePage.jsp";//回到商城首页*/
                   send();
                }
            }

        });

       <%--location.href="${pageContext.request.contextPath}/personal/index?orderno="+orderno+"&goodsid"--%>
    }
    function send() {
        if(flag){
            location.href="${pageContext.request.contextPath}/personal/index";//回到个人中心首页
        }else {
            location.href="${pageContext.request.contextPath}/jspPage/homePage.jsp";//回到商城首页
        }
    }
</script>
</html>
